<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件管理</title>
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/layui@2.6.8/dist/css/layui.css">
    <script src="//cdn.jsdelivr.net/npm/layui@2.6.8/dist/layui.js" charset="utf-8"></script>
</head>

<body>
    <div style="padding: 15px;margin: 15px;background-color: #fff;">
        <!-- 搜索表单 -->
        <div class="layui-form" style="border-bottom:1px solid #f6f6f6">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">文件名</label>
                    <div class="layui-input-block">
                        <input type="text" name="file_name|path" value="" placeholder="请输入" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">类型</label>
                    <div class="layui-input-inline">
                        <select name="path">
                            <option value=""></option>
                            <option value="/images/">图片</option>
                            <option value="/product_imgs/">商品图片</option>
                            <option value="/files/">文件</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-inline">
                        <select name="status">
                            <option value=""></option>
                            <option value="0">正常</option>
                            <option value="1">未使用</option>
                            <option value="2">失效</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <button type="submit" lay-submit lay-filter="search" class="layui-btn">筛选</button>
                </div>
            </div>
        </div>

        <!-- 数据表格 -->
        <table class="layui-table" lay-filter="dataTable"
            lay-data="{'url':'/admins/files/index', where:{search: ''}, id: 'dataTable', toolbar: '#toolbar', page:true}">
            <thead>
                <tr>
                    <th lay-data="{checkbox:true, fixed: 'left'}"></th>
                    <th lay-data="{field:'id', width:80, sort: true}">ID</th>
                    <th lay-data="{field:'file_name', edit: true}">文件名</th>
                    <th lay-data="{field:'preview', sort: true}">预览</th>
                    <th lay-data="{field:'size', sort: true}">大小</th>
                    <th lay-data="{field:'status_info', sort: true}">状态</th>
                    <th lay-data="{field:'time', sort: true}">时间</th>
                    <th lay-data="{width:180, align:'center', toolbar: '#databar'}">操作</th>
                </tr>
            </thead>
        </table>

        <!-- 头工具栏 -->
        <script type="text/html" id="toolbar">
            <div class="layui-btn-group">
                <button class="layui-btn layui-btn-sm" lay-event="delAll">批量删除</button>
                <button class="layui-btn layui-btn-sm" lay-event="uploadAll">批量上传</button>
                <button class="layui-btn layui-btn-sm" lay-event="calc">计算状态</button>
                <button class="layui-btn layui-btn-sm" lay-event="refresh"><i class="layui-icon layui-icon-refresh"></i></button>
            </div>
        </script>

        <!-- 行工具 -->
        <script type="text/html" id="databar">
            <a class="layui-btn layui-btn layui-btn-xs layui-btn-primary" lay-event="view">查看</a>
            <a class="layui-btn layui-btn layui-btn-xs" lay-event="rename">重命名</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs {{#if(d.status===0){}} layui-btn-disabled{{#}}}" {{#if(d.status!==0){}} lay-event="del"{{#}}}>删除</a>
        </script>

    </div>

    <!-- js -->
    <script>
        layui.use(['table', 'form', 'upload', 'util'], function () {
            var table = layui.table,
                upload = layui.upload,
                form = layui.form,
                util = layui.util,
                $ = layui.jquery;

            // 获取应用、控制器和方法
            var module = '{:app("http")->getName()}'
                , controller = '{$Request.controller}'
                , action = '{$Request.action}';

            // 头工具栏事件
            table.on('toolbar(dataTable)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                var data = checkStatus.data;

                // 头工具栏批量删除
                if (obj.event === 'delAll') {
                    if (data.length === 0) {
                        return layer.msg('请选择数据');
                    }
                    layer.confirm('确定删除吗？', { icon: 3 }, function (index) {
                        var ids = [];
                        data.forEach(elem => { ids.push(elem.id); });
                        $.post('/' + module + '/' + controller + '/del', { id: ids }, function (res) {
                            if (res.code) return layer.msg(res.msg, { icon: 2 });
                            layer.msg(res.msg);
                            table.reload(obj.config.id);
                        }, 'json');
                    });
                }

                // 头工具栏批量上传
                if (obj.event === 'uploadAll') {
                    layer.open({
                        type: 1,
                        title: '批量上传',
                        shadeClose: true,
                        area: ["280px", "360px"],
                        content: $('#upload-drag'),
                    });
                }

                // 头工具栏计算状态
                if (obj.event === 'calc') {
                    layer.confirm('用于查找长期未使用的文件？', { icon: 3 }, function () {
                        layer.load()
                        $.get('/admins/files/calc', {}, function (res) {
                            layer.closeAll("loading");
                            if (res.code) return layer.msg(res.msg, { icon: 2 });
                            table.reload('dataTable');
                            layer.alert(res.msg, { icon: 1 }, function (index) {
                                layer.close(index);
                            });
                        }, 'json');
                    });
                }

                // 头工具栏刷新
                if (obj.event === 'refresh') {
                    table.reload(obj.config.id);
                }

            });

            // 监听行工具事件
            table.on('tool(dataTable)', function (obj) {
                var data = obj.data;

                // 行工具删除行
                if (obj.event === 'del') {
                    layer.confirm('真的删除行么？', { icon: 3 }, function (index) {
                        layer.close(index);
                        $.post('/' + module + '/' + controller + '/del', { id: data.id }, function (res) {
                            if (res.code) return layer.msg(res.msg, { icon: 2 });
                            obj.del();
                            layer.msg(res.msg);
                        }, 'json');
                    });
                }

                // 行工具重命名
                if (obj.event === 'rename') {
                    if (data.status == 0) return layer.alert('文件有在使用中，请重新计算状态', { icon: 2 });
                    layer.prompt({ title: '重命名', formType: 0, value: data.file_name, maxlength: 255 }, function (val, index) {
                        $.post('/' + module + '/' + controller + '/rename', { id: data.id, file_name: val }, function (res) {
                            if (res.code) return layer.msg(res.msg);
                            layer.close(index);
                            // 同步更新缓存对应的值
                            obj.update({
                                file_name: res.data['file_name'],
                                path: res.data['path'],
                                preview: res.data['preview'],
                            });
                            layer.msg(res.msg, { icon: 1 });
                        }, 'json');
                    });
                }

                // 行工具查看值
                if (obj.event === 'view') {
                    layer.prompt({ title: '查看', formType: 2, value: data.path, maxlength: 255 }, function (val, index, elem) {
                        layer.close(index);
                    });
                }

            });

            // 监听单元格编辑
            table.on('edit(dataTable)', function (obj) {
                var value = obj.value //得到修改后的值
                    , data = obj.data //得到所在行所有键值
                    , field = obj.field; //得到字段
                var datas = {};
                datas['id'] = data.id;
                datas[field] = util.escape(value);
                $.post('/' + module + '/' + controller + '/rename', datas, function (res) {
                    if (res.code) {
                        layer.msg(res.msg, { icon: 2 });
                        table.reload('dataTable');
                        return;
                    }
                    layer.msg(res.msg, { icon: 1 });
                }, 'json');
            });

            // 监听表单搜索框事件
            form.on('submit(search)', function (obj) {
                var field = obj.field;
                // 数据表格重载
                table.reload('dataTable', { where: { search: field } });
                return false;
            });

            // 文件上传（拖拽上传）
            upload.render({
                elem: '#upload-drag',
                url: '/admins/files/upload', // 改成您自己的上传接口
                size: '{$size}',
                exts: '{$exts}',
                done: function (res) {
                    layer.msg('上传成功');
                    layui.$('#upload-drag-view').removeClass('layui-hide').find('img').attr('src', res.files.file);
                }
            });
        });
    </script>

    <!-- 批量上传 -->
    <div class="layui-upload-drag" id="upload-drag" style="margin:10px 0 0 10px;display: none;">
        <i class="layui-icon layui-icon-upload"></i>
        <p>点击上传，或将文件拖拽到此处</p>
        <div class="layui-hide" id="upload-drag-view">
            <hr>
            <img src="" alt="上传成功后渲染" style="max-width: 196px">
        </div>
    </div>
</body>

</html>